<!-- CustomRadioGroup.vue -->
<template>
  <div class="custom-radio-group">
    <label v-for="option in options" :key="option.value" class="custom-radio">
      <input
        type="radio"
        :value="option.value"
        :checked="modelValue === option.value"
        @change="$emit('update:modelValue', option.value)"
        :disabled="disabled"
      />
      <span class="radio-label">{{ option.label }}</span>
    </label>
  </div>
</template>

<script setup>
defineProps({
  modelValue: {
    type: [String, Number, Boolean],
    required: true,
  },
  options: {
    type: Array,
    required: true,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});

defineEmits(["update:modelValue"]);
</script>
